<template>
    <div class="box">
        <div class="ti">相关影片</div>
        <ul>
            <li v-for="(item,index) in pm"
            :key="index"
             @click="tiao(item.id)"
            >
                <div class="box1">
                    <img :src="item.img" alt="">
                    <div class="fen" v-if="item.sc">喵喵评分{{item.sc}} 分</div>
                    <div class="fen" v-if="!item.sc"> 暂无评分</div>
                </div>
                <div class="myName">{{item.title}}</div>
                <div class="line"></div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props:{
        pm:[Array]
    
    },
    methods:{
         tiao(a){
    //   // console.log(a);
    //   this.$router.go({name:'XiangQing',params:{id:a}})
    //   console.log(a);



    }
    }
    
}
</script>
<style lang="less" scoped>
.box{
    border-radius: 0 0 5px 5px ;
    .ti{
        font-size: 15px;
        color: #333;
    }
    border-bottom: 1px solid #f0f0f0;
    background-color: white;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    ul{
        width: 100%;
        box-sizing: border-box;
        color: red;
        display: flex;
        overflow-x: auto;
         &::-webkit-scrollbar {
           display: none;
          }

        li{
            width: 96px;
            .line{
                width: 100%;
                height: 2px;
            }
             &:nth-child(odd){
                .line{
                     background-color: #ec6060;
                    
                        }

                }
                  &:nth-child(even){
                .line{
                     background-color: #00bfff;

                    
                        }

                }
            margin: 5px;
            .box1{
                position: relative;
                width: 96px;
                height: 134px;
                .fen{
                    width: 100%;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    font-size: 10px;
                    color: #faaf00;
                    background-color: rgba(0,9,0,.4);
                }
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .myName{
                width: 100%;
                box-sizing: border-box;
               overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 15px;
                color: #333;
            }
           
        }
    }
}
</style>